import React from 'react'
import { connect } from 'react-redux'
import '../css/cart.css'
import { selectChange, allChange } from '../redux/action'

class Cart extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                {
                    this.props.cartItem.map((item, index)=> {
                        return <div key={index} className="cart_item">
                            <input type="checkbox" checked={item.checked} onChange={(event)=> {
                                var element = {
                                    _id: item.item._id,
                                    checked: event.target.checked
                                }
                                this.props.select(selectChange(element))
                            }} />
                            <img src={item.item.productImage} width="80px"/>
                            <div>{item.item.productName}</div>
                            <div>￥{item.item.salePrice}</div>
                            <div>{item.count}</div>
                        </div>
                    })
                }
                <div className="cart_item_things">
                    <div>
                        全选<input type="checkbox" checked={this.props.allChecked} onChange={(event)=> {
                            // console.log(event.target.checked)
                            this.props.allSelect(allChange(event.target.checked))
                        }} />
                    </div>
                    <div>
                        总量：<span>{this.props.totalCount}</span>
                    </div>
                    <div>
                        总价：<span>{this.props.totalMoney}</span>
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateTpProps(rootReducer) {
    return {
        cartItem: rootReducer.cartReducer.cart,
        allChecked: rootReducer.cartReducer.allChecked,
        totalCount: rootReducer.cartReducer.totalCount,
        totalMoney: rootReducer.cartReducer.totalMoney
    }
}

function mapActionToProps(dispatch) {
    return {
        select: (action)=> {dispatch(action)},
        allSelect: (action)=> {dispatch(action)}
    }
}



export default connect(mapStateTpProps, mapActionToProps)(Cart);